<template>
  <div>
    <ul class="pagination">
      <li><a :href="'/#'+message.path+'page='+(Number(message.currentPage) - 1)"
             v-if="message.currentPage !== '1'">&laquo;</a>
      </li>
      <li v-for="item in showList" :key="item.id">
        <a :href="item.href" :class="{'active': item.active}">{{ item.content }}</a>
      </li>
      <li>
        <a :href="'/#'+message.path+'page='+(Number(message.currentPage) + 1)"
           v-if="lastLi(message.currentPage)">&raquo;</a>
      </li>
    </ul>
    <div class="info">
      <label>共&nbsp;{{ message.totalPage }}&nbsp;页&nbsp;&nbsp;/&nbsp;&nbsp;合计&nbsp;{{ message.totalNum }}&nbsp;条数据，跳转至&nbsp;&nbsp;&nbsp;</label>
      <input type="text" v-model="page" @keypress.enter="toNextPage">
      <label>&nbsp;&nbsp;&nbsp;页</label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data () {
    return {
      page: '',
      showList: [],
      dataList: []
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    //
  },
  methods: {
    init () {
      this.list = []
      this.dataList = []
      const current = this.message.currentPage
      const total = this.message.totalPage
      for (let i = 1; i <= total; i++) {
        const item = {id: i - 1, href: '/#' + this.message.path + 'page=' + i, content: i, active: false}
        this.dataList.push(item)
      }
      this.dataList[current - 1].active = true
      this.refresh()
    },
    refresh: function () {
      const current = this.message.currentPage
      const total = this.message.totalPage
      // 当前页前面的按钮
      if (current <= 4) {
        this.showList = this.dataList.slice(0, current)
      } else {
        this.showList = this.dataList.slice(0, 1)
        const item = {id: total + 1, href: 'javascript:;', content: '...', active: false}
        this.showList.push(item)
        if (current >= Number(total) - 2) {
          this.showList = this.showList.concat(this.dataList.slice(Number(total) - 5, current))
        } else {
          this.showList = this.showList.concat(this.dataList.slice(Number(current) - 3, current))
        }
      }
      if ((total - current) < 4) {
        this.showList = this.showList.concat(this.dataList.slice(current, total))
      } else {
        if (current <= 2) {
          this.showList = this.showList.concat(this.dataList.slice(current, 5))
        } else {
          this.showList = this.showList.concat(this.dataList.slice(current, Number(current) + 2))
        }
        const item = {id: total + 2, href: 'javascript:;', content: '...', active: false}
        this.showList.push(item)
        this.showList.push(this.dataList[total - 1])
      }
    },
    lastLi: function (val) {
      return val < this.message.totalPage
    },
    toNextPage: function () {
      if (Number(this.page) > 0 && Number(this.page) <= this.message.totalPage) {
        this.$router.push(this.message.path + 'page=' + this.page)
      }
    }
  },
  props: ['message'],
  watch: {
    'message.currentPage': {
      handler: function (newVal, oldVal) {
        this.dataList[oldVal - 1].active = false
        this.dataList[newVal - 1].active = true
        this.refresh()
      }
    },
    'message.totalPage': {
      handler: function (newVal, oldVal) {
        this.init()
      }
    }
  }
}
</script>

<style scoped>
  .active {
    background: var(--primary-color);
  }
  .pagination li {
    margin-right: 10px;
  }
  .pagination li a {
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 4px;
    font-size: 18px;
  }
  .info {
    line-height: 36px;
  }
  .info label {
    float: left;
  }
  .info input {
    width: 70px;
    padding: 5px 12px;
    color: aliceblue;
    display: inline-block;
    height: 100%;
  }
</style>
